<template>
  <div id="test4">
    <el-card>
      <span>查询条件</span>
      <el-form label-width="100px" style="margin-top: 10px">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="查询时间">
              <el-date-picker
                v-model="value1"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="班级">
              <el-input v-model="input_class" placeholder="请输入班级" style="width:130px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="学生姓名">
              <el-input v-model="input_time" placeholder="请输入学生姓名" style="width:130px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="学生学号">
              <el-input v-model="input_class" placeholder="请输入学生学号" style="width:130px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <el-form-item label="学生卡号">
              <el-input v-model="input_class" placeholder="请输入学生卡号" style="width:130px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="设备名称">
              <el-input v-model="input_time" placeholder="请输入设备名称" style="width:130px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="通行方向">
              <el-input v-model="input_class" placeholder="请输入通行方向" style="width:130px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="进出类型">
              <el-input v-model="input_time" placeholder="请输入进出类型" style="width:130px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="设备号">
              <el-input v-model="input_class" placeholder="请输入设备号" style="width:130px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3">
            <el-button type="primary" style="width:100px">查询</el-button>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" style="width:100px">导出</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card style="margin-top:20px">
      <span>进出记录</span>
      <el-table
        ref="multipleTable"
        v-loading="loading"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%; text-align: center;align-items: center;
          justify-content: center;
        "
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="stuName" align="center" label="学生姓名"></el-table-column>
        <el-table-column prop="photo" align="center" label="抓拍照片"></el-table-column>
        <el-table-column prop="stuNo" align="center" label="学号"></el-table-column>
        <el-table-column prop="class" align="center" label="班级"></el-table-column>
        <el-table-column prop="shebei" align="center" label="设备名称"></el-table-column>
        <el-table-column prop="shebeihao" align="center" label="设备号"></el-table-column>
        <el-table-column prop="stuCard" align="center" label="学生卡号"></el-table-column>
        <el-table-column prop="fangxiang" align="center" label="通行方向"></el-table-column>
        <el-table-column prop="jinchu" align="center" label="进出类型"></el-table-column>
        <el-table-column prop="time" align="center" label="进出时间" column-key="date"></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="dialogFormVisible = true">查看</el-button>
            <el-button type="text" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
        <div></div>
      </el-table>
    </el-card>

    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "JingChu",
  //组件创建
  created() {},
  mounted() {},
  data() {
    
    return {
      input_class:'',
      input_time:'',
      dialogFormVisible: false,
      // 遮罩层
      loading: false,
      tableData: [
        {
          stuName:'陈小狗',
          photo:'',
          stuNo:'123',
          class:'三年（2）班',
          shebei:'东门',
          shebeihao:'123456',
          stuCard:'123456',
          fangxiang:'离校',
          jinchu:'刷卡',
          time:'2022-3-1',
        },
        {
          stuName:'陈小狗',
          photo:'',
          stuNo:'123',
          class:'三年（2）班',
          shebei:'东门',
          shebeihao:'123456',
          stuCard:'123456',
          fangxiang:'离校',
          jinchu:'刷卡',
          time:'2022-3-1',
        },
        {
          stuName:'陈小狗',
          photo:'',
          stuNo:'123',
          class:'三年（2）班',
          shebei:'东门',
          shebeihao:'123456',
          stuCard:'123456',
          fangxiang:'离校',
          jinchu:'刷卡',
          time:'2022-3-1',
        },
        {
          stuName:'陈小狗',
          photo:'',
          stuNo:'123',
          class:'三年（2）班',
          shebei:'东门',
          shebeihao:'123456',
          stuCard:'123456',
          fangxiang:'离校',
          jinchu:'刷卡',
          time:'2022-3-1',
        },
      ],
      multipleSelection: [],
      value1: '',
    };
  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    
    handleDelete(index, row) {
      console.log(index, row);
    }
  },
};
</script>
<style lang="less" scoped></style>
